<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>父子表</title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--数据表格start-->
<script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
<!--数据表格end-->

<!--基本选项卡start-->
<script type="text/javascript" src="../../libs/js/nav/basicTab.js"></script>
<!--基本选项卡end-->
<style>
.tdContentStyle1{
  padding: 5px 0 0 0;
}
.l-grid-row-cell{
  border-right:none;
  border-bottom: 1px dashed #D8E3EF;
}
.stepTable{
  border:0;
  margin:0 auto!important;
}
.stepTable td{
  border:0;
}
</style>
</head>
<body>
	<div class="page_content">

  <div class="basicTab" id="myTab">
        
        <div name="资料" style="width:100%;">
            <table class="tableStyle" formMode="view">
              <tr><th colspan="4">详细信息</th></tr>
              <tr><td>姓名：</td><td>张小三</td><td>性别：</td><td>男</td</tr>
              <tr><td>曾用名：</td><td>张三</td><td>婚姻情况：</td><td>未婚</td</tr>
              <tr><td>籍贯：</td><td>黑龙江</td><td>民族：</td><td>汉族</td></tr>
              <tr><td>职业：</td><td>软件设计师</td><td>学历：</td><td>本科毕业</td></tr>
              <tr><td>邮编：</td><td>100110</td><td>电话：</td><td>010-00000000</td></tr>
              <tr><td>地址：</td><td>北京市海淀区</td><td>爱好：</td><td>唱歌 跳舞</td></tr>
            </table>
        </div>
        <div name="相关" style="width:100%;">
          <div id="maingrid"></div>
        </div>

  </div>

    </div>
<script type="text/javascript">
        var grid;
         var testData={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[
      {"id":1,"name":"联系人（0）","state":"未处理","icon":"../../libs/icons/icon_flat/male.png"},
      {"id":2,"name":"销售机会（0）","icon":"../../libs/icons/icon_flat/creditcard.png","state":"未处理"},
      {"id":3,"name":"合同（0）","icon":"../../libs/icons/icon_flat/notepad.png","state":"未处理"},
      {"id":4,"name":"日程（0）","icon":"../../libs/icons/icon_flat/clock.png","state":"未处理"},
      {"id":5,"name":"审批（0）","icon":"../../libs/icons/icon_flat/pencil.png","state":"未处理"},
      {"id":6,"name":"文档（0）","icon":"../../libs/icons/icon_flat/wordpress.png","state":"未处理"},
      {"id":7,"name":"任务（0）","icon":"../../libs/icons/icon_flat/listview.png","state":"未处理"}
         ]}
        function initComplete(){
        	grid = $("#maingrid").quiGrid({
                columns: [
	                { display: '操作', name: 'count',  align: 'center', width: 50,
             render: function (rowdata, rowindex, value, column){
              var strhtml='<div class="tdContentStyle1"><a><img src="'+rowdata.icon+'" width="32"/></a></div>';
                        return strhtml;
                     } },
                  { display: '合同名', name: 'name', align: 'left',width:400},
	                { display: '状态', name: 'state' ,width:200},
                  { display: '操作', isAllowHide: false, align: 'left', width: 280,
             render: function (rowdata, rowindex, value, column){
                        return '<div class="padding_left5">'
                                   + '<span class="img_setting hand" title="设置"></span>'
                                   + '&nbsp;&nbsp;<span class="img_delete hand" title="删除"></span>'
                               + '</div>';
                     }
                }
                  
                ],   
				data:testData,rownumbers:false, checkbox:false,showHeader:false,usePager:false,alternatingRow:false,mouseoverRowCssClass:null,selectRowButtonOnly:true,width:'100%', height:"100%"});
       
      $("#myTab").bind("actived",function(e,idx){
              if(idx==1){
                grid.resetHeight();
                grid.resetWidth();
              }
             
            })


        };
        
        
   
    </script>		
</body>
</html>